<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="search-list mb-10">
        <div style="display: flex;align-items: center;margin-right: 10px">
          <el-date-picker
              v-model="searchBox.start_time"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              size="small"
              class="w-140"
              :picker-options="pickerOptions1"
          ></el-date-picker>
          <el-button type="primary" size="small" @click="searchFn('search')" class="ml-10">搜索
          </el-button>
          <el-button size="small" @click="searchFn('refresh')">重置刷新</el-button>
          <el-button size="small" @click="dayTableVisible=true" class="ml-10" plain>餐品安全检查项目管理
          </el-button>
          <el-button type="primary" size="small" @click="daycheckData=null,codeUserType=1,codeVisible=true" class="ml-10" plain>今日检查二维码
          </el-button>
          <el-button type="primary" size="small" @click="daycheckData=null,codeUserType=2,codeVisible=true" class="ml-10" plain>今日责任二维码
          </el-button>
        </div>
      </div>
      <!--本体列表，数据 -->
      <el-table
          ref="multipleTable"
          :data="arryList"
          :stripe="tableStripe"
          :border="tableBorder"
          tooltip-effect="dark"
          header-cell-class-name="table-text-c"
          cell-class-name="table-text-c">
<!--        <el-table-column-->
<!--            align="center"-->
<!--            prop="id"-->
<!--            label="ID"-->
<!--            width="50">-->
<!--        </el-table-column>-->
        <el-table-column
            align="center"
            prop="day"
            label="日期">
        </el-table-column>
        <el-table-column
            align="center"
            label="检查人">
          <template slot-scope="scope">
            {{scope.row.user?scope.row.user.realname:''}}
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="当日责任人">
          <template slot-scope="scope">
            <el-popover
                placement="left-start"
                title="不符合项责任人"
                width="250"
                trigger="hover">
              <div class="tableline">
                <div class="list" v-for="item in scope.row.rectified_user" :key="'l'+item.id">
                  <p>{{ item.realname }}：<i
                      :style="{color: item.status==1?'green':'red'}">{{
                      item.status == 1 ? '已确认':'未确认'
                    }}</i></p>
                </div>
              </div>
              <el-link slot="reference" type="primary">
                查看
              </el-link>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            width="250"
            align="center"
            label="操作">
          <template slot-scope="scope">
            <el-button size="mini" plain @click="detailId=scope.row.id,iframeVisible=true">
              食品安全排查表
            </el-button>
<!--            <el-button size="mini" plain @click="daycheckData=scope.row,codeUserType=1,codeVisible=true">-->
<!--              当日检查人-->
<!--            </el-button>-->
            <el-button size="mini" plain @click="daycheckData=scope.row,codeUserType=2,codeVisible=true">
              当日责任人
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
      <dayTable :visible.sync="dayTableVisible"></dayTable>
      <codeCheck :visible.sync="codeVisible" codeType="2" :codeUserType="codeUserType" :daycheckData="daycheckData"></codeCheck>
      <printIframe :visible.sync="iframeVisible" printType="2" :detailId="detailId"></printIframe>
    </div>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'
import {foodCheckDayNow} from "@/api/admin/schoolFood"
import dayTable from "../components/day-table"
import codeCheck from "../components/codeCheck";
import printIframe from "../components/printIframe";
// import {schoolFoodWeek} from "@/api/admin/schoolFood"

export default {
  components: {dayTable, codeCheck, printIframe},
  data() {
    return {
      iframeVisible:false,
      codeVisible:false,
      dayTableVisible:false,
      allDayVisible: false,
      allDayEditVisible: false,
      detailId: 0,
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      codeUserType: 0, // 1 检查人检查 2 责任人查看
      arryList: [
        {
          id: 101,
          time: '2023-02-23',
          userName: '小李'
        }
      ], // 数据列表
      // 页数
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      addTrainVisible: false,
      trainningId: 0,
      searchBox: {
        start_time: '',
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() //  - 8.64e7
        }
      },
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      treeList: [],
      treeChildList: [],
      fileName: [],
      daycheckData: null
    }
  },
  watch: {},
  created() {
    // schoolFoodWeek({p:0}).then(res=>{
    //   console.log('res:', res)
    // })
    this.InitFn()
  },
  methods: {
    // 初始化
    async InitFn() {
      let option_ = JSON.parse(JSON.stringify(this.searchBox))
      option_.p = this.page.pageindex
      foodCheckDayNow(option_).then(res => {
        for(let item of res.list.data){
          let end_user_ = item.end_user.split(',').map(Number)
          for(let line of item.rectified_user){
            if(end_user_.indexOf(line.id)===-1){
              line.status = 0
            }else{
              line.status = 1
            }
          }
        }
        this.arryList = res.list.data;
        this.page.total = res.list.total;
      })
    },
    searchFn(option) {
      if (option === 'refresh') {
        let newGetPower = JSON.parse(JSON.stringify(this.getPower))
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPower = newGetPower;
        this.searchBox.class_id = '';
        this.searchBox.section_id = '';
        this.searchBox.start_time = ''
      }
      this.page.pageindex = 1;
      this.InitFn()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    deletefn(row) {
      this.$confirm('确认删除该学生健康记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelCalss(row.id)
      }).catch(() => {
      })
    },
    async detelCalss(id) {
      dayCheckDelete({id: id}).then(res => {
        console.log('res:', res)
        if (!res.code) {
          this.$message.success(res.msg)
          this.InitFn()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 更新值
    updateVal(option) {
      console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchBox[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchBox[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchBox[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
      if (option.nameOption) {
        this.fileName = option.nameOption
      }
    },
  },
  mounted() {

  },
}
</script>
<style>
.lead-list {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fddeae;
  margin-bottom: 5px;
  border-radius: 2px;
  padding: 5px 0;
}

.lead-list:last-child {
  margin-bottom: 0;
}

.lead-list span {
  margin-right: 30px;
}
.tableline i{
  font-style: normal;
}
</style>

